<template>
  <div class="three2">
      <div style="  padding-left: 24px;
    /* height: 25px; */
    line-height: 25px;
    bottom: 10px;
    position: relative;
    font-size: 26px;
    font-weight: normal;
    color: #fff;
    text-align: center;">销往地区排行</div>
      <div id="mainshop" style="width: 100%;height:80px;top:10px">
      </div>
      <div style="width: 100%;height:60%;overflow: hidden;">
        <div style="width:45%;float:left;color:white;margin-left:2%;margin-top:4%;height:70%;">
          <div>
            <table  style="width: 100%;boder:white"
            class="lxm-one">
              <thead>
                <tr>
                  <th align="center" width="30" height="20" style="font-size:20px;border-left:1px solid;">地区</th>
                  <th align="center" width="30" style="font-size:20px">单数</th>
                  <th align="center" width="30" style="font-size:20px">成交额</th>
                </tr>
              </thead>
            </table>
          </div>
          <vue-seamless-scroll :data="listData" class="seamless-warp">
            <table class="item lxm-two" 
            style="width: 100%;boder:white"
          >
              <tbody>
                <tr v-for="(item,index) in listData" :key="index" class="lxm-two">
                  <td align="center" width="30" style="border-left:1px solid">{{item.adress}}</td>
                  <td align="center" width="30">{{item.count}}</td>
                  <td align="center" width="30" style="border-right:1px solid;">{{item.money}}</td>
                </tr>
              </tbody>
            </table>
          </vue-seamless-scroll>
        </div>

        <div style="width:50%;float:right">
          <h2 style="color:white;    left: 14px;
    position: relative;
    top: 15px;">线上销售途径</h2>
           <div style="width:90%;float:left;color:white;margin-left:2%;margin-top:4%;height:70%;">
          <div>
            <table  style="width: 100%;boder:white"
            class="lxm-three">
              <thead>
                <tr>
                  <th align="center" width="120px" height="20" style="font-size:20px;border-left:1px solid;">时间</th>
                  <th align="center" width="120px" style="font-size:20px">天猫</th>
                  <th align="center" width="120px" style="font-size:20px">微店</th>
                   <th align="center" width="120px" style="font-size:20px">官网</th>
                </tr>
              </thead>
            </table>
          </div>
          <vue-seamless-scroll :data="listData" class="seamless-warp">
            <table class="item lxm-two" 
            style="width: 100%;boder:white"
          >
              <tbody>
                <tr v-for="(item,index) in tableData" :key="index" class="lxm-four">
                  <td align="center" width="120px" style="border-left:1px solid">{{item.date}}</td>
                  <td align="center" width="120">{{item.taobao}}</td>
                  <td align="center" width="120">{{item.weidian}}</td>
                  <td align="center" width="120" style="border-right:1px solid;">{{item.guanwang}}</td>
                </tr>
              </tbody>
            </table>
          </vue-seamless-scroll>
        </div>

          
        </div>
      </div>
    </div>
</template>

<script>
import 'echarts/lib/chart/line';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import echarts from "echarts";
export default {
  components: {},
  props: {},
  data() {
    return {
      tableData: [
        {
          date: "日",
          taobao: "112单",
          weidian: "126单",
          guanwang: "258单"
        },
        {
          date: "月",
          taobao: "3360单",
          weidian: "3780单",
          guanwang: "7740单"
        },
        {
          date: "年",
          taobao: "26880单",
          weidian: "30240单",
          guanwang: "61920单"
        }
      ],
      myChart: null,
      placeHoledStyle: {},
      dataStyle: {},
      fontColor: "",
      data: [],
      titleArr: [],
      seriesArr: [],
      option: {},
      colors: [],
      listData: [
        {
          adress: "山东",
          count: "5905单",
          money:"406544元"
        },
        {
          adress: "江苏",
          count: "1589单",
          money:"109454元"
        },
        {
          adress: "浙江",
          count: "1249单",
          money:"85999元"
        },
        {
          adress: "北京",
          count: "681单",
          money:"46908元"
        },
        {
          adress: "上海",
          count: "455单",
           money:"31272元"
        }
       ]
    };
  },
  watch: {},
  computed: {},
  methods: {
    shop() {
       this.backgroundColor="rgba（0,0,0,0）",
      this.myChart = echarts.init(document.getElementById("mainshop"));
      this.placeHoledStyle = {
        normal: {
          barBorderColor: "rgba(0,0,0,0)",
          color: "rgba(0,0,0,0)"
        },
        emphasis: {
          barBorderColor: "rgba(0,0,0,0)",
          color: "rgba(0,0,0,0)"
        }
      };
      this.dataStyle = {
        normal: {
          label: {
            show: true,
            position: "insideLeft",
            formatter: "{c}"
          }
        }
      };
      this.fontColor = "#30eee9";

      this.data = [
        {
          name: "山东",
          value: 52
        },
        {
          name: "江苏",
          value: 14
        },
        {
          name: "浙江",
          value: 11
        },
        {
          name: "北京",
          value: 6
        },
        {
          name: "上海",
          value: 4
        }
      ];

      this.colors = [
        ["#389af4", "#81d4fa"],
        ["#4caf50", "#e6ee9c"],
        ["#ff9800", "#ffe082"],
        ["#fd6f97", "#e1bee7"],
        ["#a181fc", "#e3d9fe"]
      ];
      this.data.forEach((item, index) => {
        this.titleArr.push({
          text: item.name,
          left: index * 20 + 9.5 + "%",
          top: "25%",
          textAlign: "center",
          textStyle: {
            fontWeight: "normal",
            fontSize: "14",
            color: this.colors[index][0],
            textAlign: "center"
          }
        });
        this.seriesArr.push({
          name: item.name,
          type: "pie",
          clockWise: false,
          radius: [30, 40],
          itemStyle: {
            normal: {
              color: this.colors[index][0],
              shadowColor: this.colors[index][0],
              shadowBlur: 0,
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          },
          hoverAnimation: false,
          center: [index * 20 + 10 + "%", "50%"],
          data: [
            {
              value: item.value,
              label: {
                normal: {
                  formatter: function(params) {
                    return "\n\n"+params.value + "%";
                  },
          position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "14",
                    fontWeight: "bold",
                    color: this.colors[index][0]
                  }
                }
              }
            },
            {
              value: 100 - item.value,
              name: "invisible",
              itemStyle: {
                normal: {
                  color: this.colors[index][1]
                },
                emphasis: {
                  color: this.colors[index][1]
                }
              }
            }
          ]
        });
      });

      this.option = {
       
        title: this.titleArr,
        series: this.seriesArr
      };

      this.myChart.setOption(this.option);

      window.addEventListener("resize", ()=>{
        this.myChart.resize();
      });
    }
  },
  created() {},
  mounted() {
    this.shop();
  }
};
</script>
<style lang="scss" scoped>
.el-table {
  width: 95% !important;
}

.seamless-warp {
  height: 100%;
  width: 100%;
  overflow: hidden;
  tr{
    height: 20px;
   width: 102px
  }
}
.lxm-two td{
  border-right:1px solid;border-bottom:1px solid ;
  width: 128.8px
}
.lxm-two td:last-child{
  border-right:0  ;
}
.lxm-one>thead>tr>th{
border-right:1px solid;border-bottom:1px solid ;border-top: 1px solid
}

.three2{
   width: 100%;
    height:100%;
    // background:url("../../../public/images/panel-r-m.png") ;
    background-size:100% 100%;
    position:relative;
	top:10px; 
	bottom:10px;
	left:10px;
	right:10px;
  box-sizing:border-box;
}
.lxm-three>thead>tr>th{
border-right:1px solid;border-bottom:1px solid ;border-top: 1px solid;
width: 120px
}
.lxm-four td{
  border-right:1px solid;border-bottom:1px solid ;
  width: 128.8px
}
.lxm-four td:last-child{
  border-right:0  ;
}
</style>